<template>
  <div class="image-list">
    <el-image
        v-for="(url, index) in realImageList"
        :key="index"
        :src="url"
        :preview-src-list="realImageList"
        style="width: 100px; height: 100px; margin: 0 10px 10px 0;"
        :fit="'cover'"
    >
      <template #error>
        <div class="image-slot">
          <el-icon><picture-filled /></el-icon>
        </div>
      </template>
    </el-image>
  </div>
</template>

<script>
import { isExternal } from "@/utils/validate"; // 判断是否为外部路径

export default {
  name: "ImageList",
  props: {
    // 接收逗号分隔的图片路径字符串
    images: {
      type: String,
      required: true,
    },
  },
  computed: {
    // 将字符串转换为数组，并拼接真实路径
    realImageList() {
      const BASE_API = import.meta.env.VITE_APP_BASE_API; // 获取 BASE_API 环境变量
      return this.images
          .split(",")
          .map((url) => url.trim()) // 去掉路径中的多余空格
          .filter((url) => url) // 过滤掉空值
          .map((url) => {
            if (isExternal(url)) {
              // 如果是外部路径，直接返回
              return url;
            }
            // 如果是相对路径，加上 BASE_API 前缀
            return `${BASE_API}${url}`;
          });
    },
  },
};
</script>

<style scoped>
.el-image{
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;
  :deep(.el-image__inner) {
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      transform: scale(1.2);
    }
  }
  :deep(.image-slot) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}
</style>
